<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="chapter" content="bp">

    <!-- For Facebook Sharing -->
    <meta property="og:url" content="http://students.brown.edu/seeing-theory/basic-probability/" />
    <meta property="og:type" content="article" />
    <meta property="og:title" content="Probabilidad Básica" />
    <meta property="og:description" content="Este capítulo es una introducción a los conceptos básicos de probabilidad." />
    <meta property="og:image" content="http://students.brown.edu/seeing-theory/img/share/1.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />



    <title>Viendo la Teoría - Probabilidad Básica</title>
    <!-- CSS Imports -->
    <!--Fonts-->
    <link href="https://fonts.googleapis.com/css?family=Assistant:300,400,600,700" rel="stylesheet">
    <!--Font Awesome-->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!--Favicon-->
    <link rel="shortcut icon" type="image/png" href="../img/favicon.png" />
    <!-- General Chapter -->
    <link rel="stylesheet" type="text/css" href="../css/chapter-style.css">
    <!-- Specific Chapter -->
    <link rel="stylesheet" type="text/css" href="basic-probability.css">
    <!-- JavaScript Imports -->
    <!-- D3 -->
    <script src="../js/d3.min.js"></script>
    <!-- Jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <!-- jstat -->
    <script src="../js/jstat.min.js"></script>
    <!-- MathJax -->
    <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_HTML"></script>
    <!-- Tool Tip -->
    <script src="../js/d3.tip.v0.6.3.js"></script>
    <!-- General Chapter -->
    <script src="../js/chapter.js"></script>
    <!-- Visualizations -->
    <script src="basic-probability.js"></script>
    <!-- Google Analytics -->
    <script>
    (function(i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r;
        i[r] = i[r] || function() {
            (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date();
        a = s.createElement(o),
            m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m)
    })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
    ga('create', 'UA-85617614-1', 'auto');
    ga('send', 'pageview');


    </script>
</head>

<body id='1'>
    <div id="share-modal"></div>
    <div class="header">
        <div class="progress-bar">
            <div class="progress-bar-color"></div>
        </div>
        <div class="header-wrapper">
            <ul class="chapter-nav">
                <li>
                    <span onclick="openNav()" id="hamburger">&#9776; </span>
                </li>
                <li><a href="../es.html" id="seeing-theory">Viendo la Teoría</a></li>
                <li><a onclick='toTop()' id='display-chapter'>Capítulo 1: Probabilidad Básica</a></li>
            </ul>
        </div>
    </div>
    <div class="col-left">
        <div class="col-left-wrapper">
            <div id="section0">
                <div class="chapter-intro">
                    <h4>Capítulo 1</h4>
                    <h1>Probabilidad Básica</h1>
                    <p>Este capítulo es una introducción a los conceptos básicos de probabilidad.
                    </p>
                </div>
                <div class="scroll-down"> <img src="../img/button/bottom-arrow.svg"></div>
            </div>
            <div id="section1">
                <div class="unit">
                    
                        <h3 >Eventos Aleatorios</h3>
                        
 
                    
                    <p>Todo a nuestro alrededor es aleatorio. La teoría de la probabilidad es la herramienta matemática que nos permite analizar los eventos aleatorios de manera estructurada. La probabilidad de un evento es un número que indica que tan factible es la ocurrencia de este. Este número siempre está entre 0 y 1, donde 0 significa imposibilidad, mientras 1 significa certidumbre.</p> 
                    <p>Un típico experimento probabilístico es el lanzamiento de una moneda, en el cual sólo hay dos posibles resultados: cara o sello. Si la moneda no está cargada, la probabilidad de obtener cara o sello es 1/2. En la realidad, al observar la secuencia de las monedas no necesariamente exactamente la mitad de ellas son cara. Sin embargo, a medida que el número de lanzamientos incrementa, la frecuencia de caras se aproxima cada vez a 50%.</p>
                    <div class="interactive-wrapper">
                        <div id="coinWrapper">
                            <div id="coin"></div>
                            <div id="coinButtons">
                                <div class="button-1" id="flipOne">Lanza una moneda</div>
                                <div class="button-1" id="flipHundred">Lánzala 100 veces</div>
                            </div>
                        </div>
                    </div>
                    <p> Si la moneda está cargada, los 2 posibles resultados no son igualmente probables. Tu puedes cambiar la distribución de las monedas arrastrando las barras de la probabilidad real (a la derecha en <span class="blue-color">azul</span>) hacia arriba o hacia abajo. Si asignamos un número a cada resultado - digamos, 1 para cara, 0 para sello - entonces hemos creado un objeto matemático conocido como <a href="../probability-distributions/es.html#section1">variable aleatoria</a>.</p>
                </div>
            </div>
            <div id="section2">
                <div class="unit">
                    <h3>Valor Esperado</h3>
                    <p>El valor esperado (o la esperanza) de una variable aleatoria es el número que intenta capturar el centro de la distribución de dicha variable aleatoria. Podemos interpretarlo como el promedio de muchas muestras independientes de dicha distribución. Más precisamente, se define como la suma ponderada de todos los posibles valores en el soporte de la variable aleatoria, cuyos pesos son las probabilidades de ocurrencia de cada uno de los valores,</p>
                    <span id="centered">$$\text{E}[X] = \sum_{x \in \mathcal{X}}xP(x)$$</span>
                    <p>Considera el experimento de lanzar un dado y observa cómo el promedio muestral converge al valor esperado de 3.5.</p>
                    <div class="interactive-wrapper">
                    <div id="dieWrapper">
                        <div id="die"></div>
                        <div id="dieButtons">
                            <div class="button-1" id="rollOne">Lanza un dado</div>
                            <div class="button-1" id="rollHundred">Lánzalo 100 veces</div>
                        </div>
                    </div></div>
                    <p>Cambia la distribución de diferentes caras del dado ("cárgalo" o hazlo tramposo) ajustando las barras <span class="blue-color">azules</span> debajo y observa cómo cambia el valor esperado.</p>
                    <div id="barDie"></div>
                </div>
            </div>
            <div id="section3">
                <div class="unit">
                    <h3>Varianza</h3>
                    <p>Mientras el valor esperado es una medida de centralidad, la varianza de una variable aleatoria cuantifica el ancho o la extensión de su distribución de probabilidad. La varianza es el valor medio del cuadrado de la diferencia entre la variable aleatoria y su valor esperado,</p>
                    <span id="left-mathjax">$$\text{Var}(X) = \text{E}[(X - \text{E}[X])^2]$$</span>
                    <p>Roba cartas aleatoriamente de un mazo de 10 cartas. A medida que vas robando cartas, observa que el promedio acumulado de las diferencias cuadradas (en <span class="green-color">verde</span>) empieza a parecerse a la varianza real (en <span class="blue-color">azul</span>).</p>
                    <div class="interactive-wrapper">
                        <div id="cardWrapper">
                            <div id="card"></div>
                            <div id="cardButtons">
                                <div class="button-1" id="drawOne">Roba una Carta</div>
                                <div class="button-1" id="drawHundred">Roba 100 veces</div>
                            </div>
                        </div>
                    </div>
                    <p>Ajusta las cartas que quieres incluir en la baraja haciendo clic en ellas debajo.</p>
                     <div class="interactive-wrapper">
                     </br>
                    <input type="checkbox" class="deck" id="card_one" value="1">
                    <label for="card_one"></label>
                    <input type="checkbox" class="deck" id="card_two" value="2">
                    <label for="card_two"></label>
                    <input type="checkbox" class="deck" id="card_three" value="3">
                    <label for="card_three"></label>
                    <input type="checkbox" class="deck" id="card_four" value="4">
                    <label for="card_four"></label>
                    <input type="checkbox" class="deck" id="card_five" value="5">
                    <label for="card_five"></label>
                    <input type="checkbox" class="deck" id="card_six" value="6">
                    <label for="card_six"></label>
                    <input type="checkbox" class="deck" id="card_seven" value="7">
                    <label for="card_seven"></label>
                    <input type="checkbox" class="deck" id="card_eight" value="8">
                    <label for="card_eight"></label>
                    <input type="checkbox" class="deck" id="card_nine" value="9">
                    <label for="card_nine"></label>
                    <input type="checkbox" class="deck" id="card_ten" value="10">
                    <label for="card_ten"></label>
                    </div>
                </div>
            </div>
        </div>
        <div class="action-buttons">
            
            <ul>
                <a href="../doc/basic-probability.pdf">
                    <li><i class="fa fa-file-text-o action-icon" aria-hidden="true"></i> <span>Descargar</span></li>
                </a>
                <a id="share-button" >

                    <li class="inline-share">
                        <i class="fa fa-share-square-o action-icon" aria-hidden="true"></i>Compartir
                    </li>
                    <li><div id="share-modal"></div></li>

                </a>

            </ul>
        </div>
        <a href="../compound-probability/es.html">
            <div class="chapter-footer" id="next-chapter-color">
                <div class="chapter-footer-wrapper">
                    <h4>Siguiente</h4>
                    <p id='next-chapter'>Probabilidad Compuesta → </p>
                </div>
            </div>
        </a>
    </div>
    <div class="col-right">
        <div class='language-setting'>
            <select class="languageSetting">
                <option selected>Español</option>
                <option data-url="index.html">English</option>
                <option data-url="cn.html">中文</option>
            </select>
        </div>
        <div class="nav-section" id="section-0">
            <div class="nav-unit-wrapper" id='one'>
                <img src="../img/tiles/1-1.png">
                <span class="nav-unit-title"> Eventos Aleatorios</span>
            </div>
            <div class="nav-unit-wrapper" id='two'>
                <img src="../img/tiles/1-2.png">
                <span class="nav-unit-title"> Valor Esperado</span>
            </div>
            <div class="nav-unit-wrapper" id='three'>
                <img src="../img/tiles/1-3.png">
                <span class="nav-unit-title"> Varianza </span>
            </div>
        </div>
        <div class="visualization-section" id="section-1">
            <div class="visualization-wrapper" id="barCoin"></div>
        </div>
        <div class="visualization-section" id="section-2">
            <div class="visualization-wrapper" id="plotDie"></div>
        </div>
        <div class="visualization-section" id="section-3">
            <div class="visualization-wrapper" id="varSvg"></div>
        </div>
    </div>
    <div id="overlay">
        <div class="modal-header">
            <div class="closebtn" onclick="closeNav()">&times;</div>
            <ul>
                <li>
                    <select class="languageSetting">
                        <option selected>Español</option>
                        <option data-url="index.html">English</option>
                        <option data-url="cn.html">中文</option>
                    </select>
                </li>
                <li><a href="../es.html">INICIO</a></li>
            </ul>
        </div>
        <div class="modal-wrapper">
            <div class="modal-chapter">
                <div id="chapter-text"><span>CAPÍTULOS</span></div>
                <ul class="modal-chapter-titles">
                    <li id="bp-li" class="chapter-highlighted">Probabilidad Básica</li>
                    <li id="cp-li">Probabilidad Compuesta</li>
                    <li id="pd-li">Distribución de Probabilidad</li>
                    <li id="fi-li">Inferencia Frecuentista</li>
                    <li id="bi-li">Inferencia Bayesiana</li>
                    <li id="ra-li">Análisis de Regresión</li>
                </ul>
            </div>
            <div class="modal-visualization">
                <div id="bp" class="current">
                    <div class="nav-unit-wrapper-s tile1">
                        <img src="../img/tiles/1-1.png" class="nav-unit-tile-s">
                        <span class="nav-unit-title-s"> Eventos Aleatorios </span>
                    </div>
                    <div class="nav-unit-wrapper-s tile2">
                        <img src="../img/tiles/1-2.png" class="nav-unit-tile-s">
                        <span class="nav-unit-title-s"> Valor Esperado </span>
                    </div>
                    <div class="nav-unit-wrapper-s tile3">
                        <img src="../img/tiles/1-3.png" class="nav-unit-tile-s">
                        <span class="nav-unit-title-s"> Varianza </span>
                    </div>
                </div>
                <div id="cp">
                    <div class="nav-unit-wrapper-s tile1">
                        <img src="../img/tiles/2-1.png" class="nav-unit-tile-s">
                        <span class="nav-unit-title-s"> Teoría de Conjuntos </span>
                    </div>
                    <div class="nav-unit-wrapper-s tile2">
                        <img src="../img/tiles/2-2.png" class="nav-unit-tile-s">
                        <span class="nav-unit-title-s"> Técnicas de Conteo </span>
                    </div>
                    <div class="nav-unit-wrapper-s tile3">
                        <img src="../img/tiles/2-3.png" class="nav-unit-tile-s">
                        <span class="nav-unit-title-s"> Probabilidad Condicional </span>
                    </div>
                </div>
                <div id="pd">
                    <div class="nav-unit-wrapper-s tile1">
                        <img src="../img/tiles/3-1.png" class="nav-unit-tile-s">
                        <span class="nav-unit-title-s"> Variables Aleatorias </span>
                    </div>
                    <div class="nav-unit-wrapper-s tile2">
                        <img src="../img/tiles/3-2.png" class="nav-unit-tile-s">
                        <span class="nav-unit-title-s"> Discretas y Continuas </span>
                    </div>
                    <div class="nav-unit-wrapper-s tile3">
                        <img src="../img/tiles/3-3.png" class="nav-unit-tile-s">
                        <span class="nav-unit-title-s"> Teorema Límite Central </span>
                    </div>
                </div>
                <div id="fi">
                    <div class="nav-unit-wrapper-s tile1">
                        <img src="../img/tiles/4-1.png" class="nav-unit-tile-s">
                        <span class="nav-unit-title-s"> Estimación Puntual</span>
                    </div>
                    <div class="nav-unit-wrapper-s tile2">
                        <img src="../img/tiles/4-2.png" class="nav-unit-tile-s">
                        <span class="nav-unit-title-s"> Intervalos de Confianza </span>
                    </div>
                    <div class="nav-unit-wrapper-s tile3">
                        <img src="../img/tiles/4-3.png" class="nav-unit-tile-s">
                        <span class="nav-unit-title-s"> Bootstrap </span>
                    </div>
                </div>
                <div id="bi">
                    <div class="nav-unit-wrapper-s tile1">
                        <img src="../img/tiles/5-1.png" class="nav-unit-tile-s">
                        <span class="nav-unit-title-s"> Teorema de Bayes </span>
                    </div>
                    <div class="nav-unit-wrapper-s tile2">
                        <img src="../img/tiles/5-2.png" class="nav-unit-tile-s">
                        <span class="nav-unit-title-s"> Función de Verosimilitud </span>
                    </div>
                    <div class="nav-unit-wrapper-s tile3">
                        <img src="../img/tiles/5-3.png" class="nav-unit-tile-s">
                        <span class="nav-unit-title-s"> A Priori y a Posteriori </span>
                    </div>
                </div>
                <div id="ra">
                    <div class="nav-unit-wrapper-s tile1">
                        <img src="../img/tiles/6-1.png" class="nav-unit-tile-s">
                        <span class="nav-unit-title-s"> Mínimos Cuadrados </span>
                    </div>
                    <div class="nav-unit-wrapper-s tile2">
                        <img src="../img/tiles/6-2.png" class="nav-unit-tile-s">
                        <span class="nav-unit-title-s"> Correlación </span>
                    </div>
                    <div class="nav-unit-wrapper-s tile3">
                        <img src="../img/tiles/6-3.png" class="nav-unit-tile-s">
                        <span class="nav-unit-title-s">Análisis de Varianza</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="share"></div>
    <!-- Share CSS and JavaScript -->
    <link rel="stylesheet" type="text/css" href="../css/jssocials.css" />
    <link rel="stylesheet" type="text/css" href="../css/jssocials-theme-flat.css" />
    <script src="../js/jssocials.min.js"></script>
    <script>
       

        $("#share").jsSocials({
            // url: "_url_",
            // _createShareLink: function(share) {
            //     var $result = jsSocials.Socials.prototype._createShareLink.apply(this, arguments);
            //     $result.on("click", function() {
            //           // replace the your placeholder with actual url
            //           var href = $result.attr("href");
            //           $result.attr("href", href.replace("_url_", shareUrl));
            //     });
            //     return $result;
            // },
            showLabel: false,
            showCount: false,
            shareIn: "popup",
            shares: ["email", "twitter", "facebook", "googleplus", "linkedin"]
        });

        

        $(".languageSetting").change(function() {
          var option = $(this).find('option:selected');
          window.location.href = option.data("url");
        });
    </script>
</body>

</html>
